<template>
  <el-form :label-width="formConfig.formProps.labelWidth">
    <el-divider content-position="center">请求头设置</el-divider>
    <voption-table v-model="headers" />

    <el-divider content-position="center">上传按钮</el-divider>
    <el-form-item label="按钮颜色">
      <el-select v-model="formData.upButton.type" @change="selectChange">
        <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="按钮文本">
      <el-input v-model="formData.upButton.text" />
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'UploadButton',
  model: {
    prop: 'inheritConfig'
  },
  props: {
    inheritConfig: {
      type: Object,
      default () {
        return {}
      }
    },
    formConfig: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      options: [
        { label: '默认按钮', value: '' },
        { label: '主要按钮', value: 'primary' },
        { label: '成功按钮', value: 'success' },
        { label: '信息按钮', value: 'info' },
        { label: '警告按钮', value: 'warning' },
        { label: '危险按钮', value: 'danger' }
      ]
    }
  },
  computed: {
    formData: {
      get () {
        const o = this.inheritConfig
        o.props = o.props || {}
        o.props.headers = o.props.headers || {}
        o.upButton = o.upButton || {}
        return o
      },
      set (o) {
        this.$emit('input', o)
      }
    },
    headers: {
      get () {
        const o = this.formData.props.headers
        return Object.keys(o).map(k => ({ label: k, value: o[k] }))
      },
      set (list) {
        const res = {}
        list.forEach(({ label, value }) => {
          res[label] = value
        })
        this.formData.props.headers = res
        this.formData = this.formData
      }
    }
  },
  methods: {
    selectChange (type) {
      const o = this.formData
      o.upButton.type = type
      this.formData = o
    }
  }
}
</script>
